<template>
  <div>
    <div class="multiple-table-con">
      <ul class="title-item flex-around">
        <li class="num flex-center">序号</li>
        <li class="logo flex-center">图像</li>
        <li class="info flex-center">详细信息</li>
        <li class="operate flex-center">操作</li>
      </ul>
      <ul
        class="list-item flex-around"
        v-for="(item, index) in uploadList"
        :key="index"
      >
        <li class="num flex-center">{{ index + 1 }}</li>
        <li class="logo flex-center">
          <!-- 后端返回URL多了个‘/data’,需截取 -->
          <!-- <div
            class="icon"
            :style="{ backgroundImage: `url(${item.logo})` }"
          ></div> -->
          <img class="icon" :src="item.logo" alt="" />
        </li>
        <li class="info">
          <div class="sub-item flex-between">
            <div class="sub sub1">
              <span>图像名称：</span><span>{{ item.fileName }}</span>
            </div>
            <div class="sub sub1">
              <span>图像来源：</span>
              <span>{{ item.source }}</span>
              <!-- <span>{{
                sensorTypeList.length > 0
                  ? sensorTypeList.filter((key) => key.id == item.id)[0].name
                  : ""
              }}</span> -->
            </div>
            <div class="sub sub1">
              <span>传感器类型：</span>
              <span>{{
                sensorTypeList.filter((key) => key.id == item.sensorId).length >
                0
                  ? sensorTypeList.filter((key) => key.id == item.sensorId)[0]
                      .name
                  : ""
              }}</span>
            </div>
            <!-- <div class="sub sub1"><span>国家地区：</span><span>{{}}</span></div> -->
          </div>
          <div class="sub-item flex-between">
            <div class="sub sub2">
              <span>标签：</span>
              <tagsGroup
                :showTagsArr="item.categoryIds.slice(0, 1)"
              ></tagsGroup>
            </div>
            <div class="sub sub2">
              <span>拍摄时间：</span><span>{{ item.shotDate }}</span>
            </div>
            <div class="sub sub2">
              <span>侦察手段：</span
              ><span>{{
                shotPlatformList.filter((key) => key.id == item.platformId)
                  .length > 0
                  ? shotPlatformList.filter(
                      (key) => key.id == item.platformId
                    )[0].name
                  : ""
              }}</span>
            </div>
          </div>
          <div class="sub-item">
            <span>描述信息：</span><span>{{ item.memo }}</span>
          </div>
        </li>
        <li class="operate flex-center">
          <div class="btns flex-center">
            <div class="btn edit flex-center" @click="edit(item, index)">
              <div class="icon edit"></div>
              <div class="tit">编辑</div>
            </div>
            <div class="btn del flex-center" @click="del(index)">
              <div class="icon del"></div>
              <div class="tit">删除</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <el-dialog
      @open="dialogOpen"
      :title="dialogTitle"
      :visible.sync="dialogVisible"
    >
      <el-form label-width="100px">
        <el-form-item label="图像名称:">
          <el-input
            v-model="imageVideoForm.fileName"
            maxlength="200"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="重要程度:">
          <el-select v-model="imageVideoForm.importanceId" placeholder="请选择">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in importanceIds"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="图像来源:">
          <!-- <el-input v-model="imageVideoForm.source" maxlength="200"></el-input> -->
          <el-select
            v-model="imageVideoForm.source"
            placeholder="请选择">
            <el-option v-for="item in sourceList" :key="item.name" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="传感器类型:">
          <el-select v-model="imageVideoForm.sensorId" placeholder="请选择">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in sensorTypeList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="拍摄时间">
          <el-date-picker
            v-model="imageVideoForm.shotDate"
            type="datetime"
            placeholder="选择日期时间"
            format="yyyy/MM/dd hh:mm:ss"
            value-format="yyyy/MM/dd hh:mm:ss"
            default-time="12:00:00"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="侦察手段:">
          <el-select v-model="imageVideoForm.platformId" placeholder="请选择">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in shotPlatformList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述信息:">
          <el-input
            type="textarea"
            v-model="imageVideoForm.memo"
            maxlength="255"
            :autosize="{ minRows: 2 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="添加标签:">
          <div class="target-tree-con">
            <div class="input">
              <tagsGroup
                :showTagsArr="categoryIds"
                :tagsClose="true"
                @tagsDel="tagsDel"
              ></tagsGroup>
            </div>
            <div class="treeTags block">
              <el-tree
                :data="treeTags"
                node-key="id"
                show-checkbox
                default-expand-all
                :props="defaultProps"
                @check-change="handleNodeClick"
                ref="elTree"
                @check="treeCheck"
              >
                <span class="custom-tree-node" slot-scope="{ node }">
                  <span>{{ node.label }}</span>
                </span>
              </el-tree>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="footer flex-center">
        <div class="cancel" @click="dialogVisible = false">取消</div>
        <div
          v-if="targetTreeSingleId"
          class="normalize"
          :class="[isNormalized ? 'isNormalized' : '']"
          @click="handleNormalize"
        >
          规范化命名
        </div>
        <div class="confirm" @click="submit">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import tagsGroup from "@/components/common/tagsGroup.vue";
export default {
  name: "multipleUpload",
  components: {
    tagsGroup,
  },
  computed: {
    ...mapState({
      targetTreeSingleId(state) {
        return state.app.targetTreeSingleId;
      },
    }),
    uploadOtherData() {
      return {
        // sessionId: this.sessionId,
        // flag: this.flag,
      };
    },
  },
  data() {
    return {
      // baseURL: window.VUE_APP_BASE_URL,
      dialogVisible: false,
      dialogTitle: "编辑",
      uploadList: [],
      imageVideoForm: {
        // 名称
        fileName: "",
        memo: "",
        // 类型
        sensorId: "",
        // 地域名称
        regionName: "",
        // 拍摄时间
        shotDate: "",
        // 平台
        platformId: "",
        title: "", // 标题
        // geographical: "", //国家地区
        // 信息
        text: "",
        source: "",
        realFileUrl: null,
        // importanceId: null, // 重要程度
        keywords: null, // 主题词
        videoType: null, // 视屏类别
        classificationId: null,
        isProduct: "0",
      },
      imageSourceList: [],
      sourceList: [],
      sensorTypeList: [],
      shotPlatformList: [],
      importanceIds: [],
      videoTypes: [], // 视屏类别
      secretTypes: [],
      treeTags: [],
      defaultProps: {
        children: "categoryTypeList",
        label: "name",
      },
      fatherIds: [],
      chekedIds: [], //  单选tree
      categoryIds: [],
      nowIndex: null, // 列表数组当前编辑索引
      isNormalized: false, // 是否规范化命名
      loading: null,
    };
  },
  activated() {
    this.uploadList = this.$route.query.query;
    // console.log(89, this.uploadList);
    // 目标树改为单选
    this.$store.commit("app/setTargetTreeIsSingle", true);
    this.imageSource();
    this.getSourceList();
    this.sensorType();
    this.shotPlatform();
    this.importanceType();
    this.secretType();
    this.categoryAndGroup();
    this.importanceType();
    this.videoType();
    this.secretType();
    let item = this.$route.params.item;
    this.item = this.$route.params.item;
    this.imageVideoForm = Object.assign(this.imageVideoForm, item);
    this.imageVideoForm.isProduct = this.imageVideoForm.isProduct + ""; // 数字转字符串
  },
  methods: {
    handleNormalize() {
      // console.log(11, this.targetTreeCheckedName, this.categoryIds);
      this.$api
        .generatorFileName({
          list: this.categoryIds,
          zzdx: this.targetTreeCheckedName,
          dataType: "1",
        })
        .then((res) => {
          // console.log(22, res);
          // 成功
          if (res.indexOf("200") != -1) {
            this.isNormalized = true;
            this.imageVideoForm.fileName = res.split(",")[1];
            /* let element = this.uploadList[this.nowIndex];
            element.fileName = res.split(",")[1];
            this.$set(this.uploadList, this.nowIndex, element); */
          } else {
            this.$notify({
              title: "提示",
              message: res.split(",")[1],
              type: "warning",
            });
          }
        });
    },
    edit(item, index) {
      this.dialogVisible = true;
      this.nowIndex = index;
      // 编辑弹窗  内容回填
      let element = this.uploadList[index];
      this.categoryIds = element.categoryIds;
      this.imageVideoForm = Object.assign(this.imageVideoForm, element);
    },
    dialogOpen() {
      // 编辑弹窗  内容回填
      this.$nextTick(() => {
        this.$refs.elTree.setCheckedKeys(this.categoryIds);
      });
    },
    del(index) {
      this.uploadList.splice(index, 1);
    },
    submitAll() {
      this.loading = this.$loading({
        lock: true,
        text: "提交中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      this.$api.batchAddImage(this.uploadList).then((res) => {
        this.loading.close();
        console.log(99999, res);
        this.$confirm("", res, {
          confirmButtonText: "确定",
          showClose: false,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          cancelButtonText: "取消",
          showCancelButton: false,
          center: true,
        })
          .then(() => {
            // 表单页是否一开始清空所有数据
            this.$store.commit("app/setIsEmptyForm", true);
            // 目标树清空
            this.$store.commit("app/setTargetTreeSingleId", "");
            // 目标名称清空
            this.$store.commit("app/setTargetTreeCheckedName", "");
            // 目标树改回多选
            this.$store.commit("app/setTargetTreeIsSingle", false);
            this.$router.replace("/imageManagement");
            // window.reload()
          })
          .catch(() => {});
      });
    },
    // 编辑弹窗提交
    async submit() {
      let data = {
        categoryIds: this.categoryIds,
        fileName: this.imageVideoForm.fileName,
        // id: 1,
        isProduct: this.imageVideoForm.isProduct,
        memo: this.imageVideoForm.memo,
        operator: "游客",
        platformId: this.imageVideoForm.platformId,
        sensorId: this.imageVideoForm.sensorId,
        shotDate: this.imageVideoForm.shotDate,
        source: this.imageVideoForm.source,
        targetType: this.targetTreeSingleId,
        realFileUrl: this.imageVideoForm.realFileUrl,
      };
      data.logo = this.uploadList[this.nowIndex].logo;
      // 校验
      /* if (!this.targetTreeSingleId) {
        this.$notify({
          title: "提示",
          message: "请选择对应目标！",
          type: "warning",
        });
        return;
      }
      for (let key in data) {
        if (!data[key]) {
          this.$notify({
            title: "提示",
            message: "请填写完整！",
            type: "warning",
          });
          return;
        }
      }
      判断标签组下的标签是不是全部选中
      let allTags = await this.$api.findAllTags();
      for (let i = 0; i < allTags.length; i++) {
        if (this.fatherIds.indexOf(allTags[i].id) === -1) {
          this.$notify({
            title: "提示",
            message: `"请填写标签下的${allTags[i].name}！"`,
            type: "warning",
          });
          return;
        }
      } */
      this.$set(this.uploadList, this.nowIndex, data);
      this.dialogVisible = false;
    },
    handleNodeClick(data, checked) {
      if (checked) {
        this.treeTags.forEach((item) => {
          item.categoryTypeList.forEach((key) => {
            if (key.id == data.id) {
              this.fatherIds.push(item.id);
              this.chekedIds.push({
                father: item.id,
                son: key.id,
              });
            }
          });
        });
      }
    },
    treeCheck(data) {
      // let that = this;
      let categoryArr = [];
      this.treeTags.forEach((item) => {
        item.categoryTypeList.forEach((key) => {
          if (key.id == data.id) {
            console.log(data, this.fatherIds, this.chekedIds);
            if (this.fatherIds.indexOf(item.id) !== -1) {
              this.chekedIds = this.chekedIds.filter(
                (j) => j.father != item.id
              );
              this.chekedIds.push({
                father: item.id,
                son: key.id,
              });
              categoryArr = this.chekedIds.map((k) => {
                return k.son;
              });
              this.$nextTick(() => {
                this.$refs.elTree.setCheckedKeys(categoryArr);
              })
            }
          }
        });
      });
      this.categoryIds = categoryArr;
    },
    tagsDel(e) {
      console.log(e);
      this.categoryIds = this.categoryIds.filter((item) => item != e);
      this.chekedIds = this.chekedIds.filter((i) => i.son != e);
      this.$nextTick(() => {
        this.$refs.elTree.setCheckedKeys(this.categoryIds);
      })
      this.$api.getTag(e).then((res) => {
        console.log(res);
        this.fatherIds = this.fatherIds.filter((item) => item != res.groupId);
      });
      console.log(this.categoryIds, this.chekedIds, this.fatherIds);
    },
    // 查询标签组及其下标签
    async categoryAndGroup() {
      this.treeTags = await this.$api.categoryAndGroup();
      this.treeTags.forEach((item) => {
        item.categoryTypeList.forEach((key) => {
          key.disabled = false;
        });
      });
    },
    // 查询重要程度
    async importanceType() {
      this.importanceIds = await this.$api.importanceType();
    },
    // 查询重要程度
    async videoType() {
      this.videoTypes = await this.$api.videoType();
    },
    // 查询视频密级
    async secretType() {
      this.secretTypes = await this.$api.secretType();
    },
    // 图像来源类型
    async imageSource() {
      let data = await this.$api.imageSourceDictionary();
      this.imageSourceList = data;
    },
    // 图像来源类型
    async getSourceList() {
      let data = await this.$api.getSourceList();
      this.sourceList = data;
      console.log('this.imageVideoForm.source:::', this.imageVideoForm.source)
      if (data.length > 0 && (this.imageVideoForm.source == '' || this.imageVideoForm.source == null)) {
        data.forEach(item => {
          if(item.defaultValue == 1) {
            this.imageVideoForm.source = item.name;
          }
        })
      }
    },
    // 传感器类型
    async sensorType() {
      let data = await this.$api.sensorType();
      this.sensorTypeList = data;
    },
    // 查询侦察手段
    async shotPlatform() {
      let data = await this.$api.shotPlatform();
      this.shotPlatformList = data;
    },
  },
};
</script>

<style lang="scss" scoped>
.multiple-table-con {
  margin-top: 0.3rem;
  ul {
    width: 15.71rem;
    min-height: 0.54rem;
    margin: 0 auto;
  }
  li {
    font-size: 0.16rem;
    min-width: 1.2rem;
    min-height: 0.54rem;
    color: #cccccc;
    &.logo {
      width: 2rem;
    }
    &.info {
      width: 7rem;
    }
    &.operate {
      width: 2rem;
    }
  }
  .title-item {
    background: #022e58;
    margin-bottom: 0.5rem;
  }
  .list-item {
    margin-bottom: 0.5rem;
    .icon {
      width: 1.29rem;
      height: 0.88rem;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
    .sub {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .info {
      .sub-item {
        overflow: hidden;
      }
      .sub1 {
        width: 2.3rem;
        overflow: hidden;
      }
      .sub2:nth-child(1) {
        width: 2.2rem;
      }
      .sub2:nth-child(2) {
        width: 3rem;
      }
      .sub2:nth-child(3) {
        width: 1.8rem;
      }
    }
  }

  .btns {
    width: 2.84rem;
    .btn {
      width: 0.88rem;
      height: 0.28rem;
      border-radius: 0.05rem;
      &.edit {
        margin: 0 0.1rem;
      }
    }
    .icon {
      display: block;
      width: 0.15rem;
      height: 0.15rem;
      // background-repeat: no-repeat;
      // background-size: 100% 100%;
      // background-position: center;
      &.add {
        background-image: url(~@/assets/common/add@2x.png);
      }
      &.edit {
        background-image: url(~@/assets/images/edit@2x.png);
      }
      &.del {
        background-image: url(~@/assets/images/del@2x.png);
      }
    }
    .add {
      background-color: #1890ff;
    }
    .edit {
      background-color: #1890ff;
    }
    .del {
      background-color: #e64f4f;
    }
    .tit {
      margin-left: 0.08rem;
      font-size: 0.14rem;
      font-weight: 400;
      color: #ffffff;
      margin-top: 0.03rem;
    }
  }
}
::v-deep .el-form {
  color: #ffffff;
  .el-form-item__label {
    width: 1rem;
    font-size: 0.16rem;
    font-family: Alibaba PuHuiTi;
    font-weight: 400;
    color: #ffffff;
  }
  .el-select {
    width: 100%;
  }
  .el-input__inner {
    background: #0355a4 !important;
    border: 1px solid #144f87;
    border-radius: 5px;
    color: #ffffff;
  }
  .el-textarea__inner {
    height: 1rem;
    background: #144f87;
    border: 1px solid #144f87;
    border-radius: 5px;
    color: #ffffff;
  }
  .el-input__count {
    background: #144f87 !important;
  }
  .el-form-item {
    margin-bottom: 0.2rem;
  }
  .upload-form-item {
    width: 60%;
    position: relative;
    z-index: 200;
  }
  .upload-demo {
    position: relative;
    z-index: 100;
    width: 100%;
    text-align: right;
    margin-top: -55px;
  }
  ::v-deep .el-upload {
    .el-button {
      margin-bottom: 0.2rem;
    }
  }
  // margin-left: 60%;
  .el-radio {
    line-height: 0.4rem;
    margin-left: 0.1rem;
  }
  .el-upload-list__item {
    // width: 200%;
    // margin-left: -178%;
  }
}
::v-deep .el-dialog {
  margin-bottom: 0.3rem;
  color: #ffffff;
  font-size: 0.16rem;
  width: 7.8rem !important;
  background: #474747;
  box-shadow: 0rem 0rem 0.38rem 0rem rgba(0, 0, 0, 0.45);
  border-radius: 0.05rem;
  .el-dialog__header {
    padding: 0.16rem;
    background: #143853 !important;
  }
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__body {
    color: #ffffff;
    background: #0f2d43 !important;
  }
  .footer {
    margin-top: 0.1rem;
    color: #ffffff;
    margin-right: 0.3rem;
    justify-content: flex-end;
    .cancel {
      text-align: center;
      width: 1.2rem;
      height: 0.38rem;
      line-height: 0.38rem;
      background: #62656c;
      border-radius: 0.05rem;
    }
    .confirm {
      margin-left: 0.2rem;
      text-align: center;
      width: 1.2rem;
      height: 0.38rem;
      line-height: 0.38rem;
      background: #1890ff;
      border-radius: 0.05rem;
    }
    .normalize {
      margin-left: 0.2rem;
      text-align: center;
      width: 1.2rem;
      height: 0.38rem;
      line-height: 0.38rem;
      border-radius: 0.05rem;
      background: #62656c;
      &.isNormalized {
        background: #1890ff;
      }
    }
  }
}
::v-deep .el-date-editor {
  width: 100%;
}
.target-tree-con {
  width: 100%;
  .input {
    margin-bottom: 0.1rem;
    min-height: 0.4rem;
    line-height: 0.4rem;
    outline: none;
    padding: 0 0.15rem;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    font-size: 0.14rem;
    background: #0355a4 !important;
    border: 1px solid #626262;
    border-radius: 0.05rem;
    color: #ffffff;
  }
}
.treeTags {
  width: 100%;
  ::v-deep .el-tree {
    overflow-y: scroll;
    width: 100%;
    height: 2.98rem;
    background: #0355a4 !important;
    border-radius: 0rem 0rem 0.05rem 0.05rem;
    color: #cccccc;
    // margin-top: 0.1rem;
    // background: transparent;
    .el-tree-node:focus > .el-tree-node__content {
      background: #034576; //背景色
    }
    .el-tree-node__content {
      height: 0.3rem;
      &:hover {
        background: #034576;
      }
    }
    .el-tree-node__label {
      font-size: 0.16rem;
      color: #cccccc;
      line-height: 0.25rem;
      letter-spacing: 1px;
    }
    .el-tree-node__expand-icon + label {
      // display: none;
    }
    .is-leaf + .el-checkbox .el-checkbox__inner {
      display: inline-block;
    }
    .el-checkbox .el-checkbox__inner {
      display: none;
    }
  }
}
</style>
